<template>
<div style="min-height:900px;">
    <topBanner :userInfo="userInfo"></topBanner>
    <div>
        <div class=" wrapper">
            <el-tabs v-model="activeName">
                <el-tab-pane label="文章" name="article">
                    <div>
                        <articleList :inSpace="true" :ListData="articleList"></articleList>
                    </div>
                    <div>
                        <moreDataBtn :isHaveData="isHaveData" :isLoading="isLoading" @moreDataClick="moreArticle"></moreDataBtn>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="关注他的人" name="fans">
                    <fanList :data="fansList"></fanList>
                    <moreDataBtn :isHaveData="isHaveFansData" :isLoading="isFansLoading" @moreDataClick="moreFansData"></moreDataBtn>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</div>
</template>

<script>
import topBanner from '@/components/personalSpaceComponents/topBanner';
import articleList from '@/components/articleList';
import moreDataBtn from '@/components/moreDataBtn';
import fanList from '@/components/fanList';
import {request} from '@/network/request.js';
export default {
    name:"PersonalSpace",
    components:{
        topBanner,
        articleList,
        moreDataBtn,
        fanList
    },
    data(){
        return {
            userInfo:{},
            articleList:[],
            fansList:[],
            activeName:"article",
            isHaveData:false,
            isLoading:false,
            articleIndex:0,
            isHaveFansData:false,
            isFansLoading:false,
            fansIndex:0
        }
    },
    methods:{
        getFirstData(){
                this.articleIndex=0;
                this.fansIndex=0;
                request({
                url:"/user/userInfo/"+this.$route.query.userId
            }).then(res=>{
                this.userInfo=res.data.userInfo;
            }).catch(err=>{
                console.log(err);
            })
            request({
                url:"/article/spaceArticleList/"+this.$route.query.userId+"/"+0
            }).then(res=>{
                this.articleList=res.data.spaceArticleListData;
                if(res.data.spaceArticleListData.length>=10){
                    this.isHaveData=true;
                }else{
                    this.isHaveData=false;
                }
            }).catch(err=>{
                console.log(err);
            })
            request({
                url:"/user/fansList/"+this.$route.query.userId+"/"+0
            }).then(res=>{
                this.fansList=res.data.fansList;
                if(res.data.fansList.length>=20){
                    this.isHaveFansData=true;
                }else{
                    this.isHaveFansData=false;
                }
            }).catch(err=>{
                console.log(err);
            })
        },
        moreArticle(){
            this.isLoading=true;
            this.articleIndex++;
            request({
                url:"/article/spaceArticleList/"+this.$route.query.userId+"/"+this.articleIndex
            }).then(res=>{
                if(res.data.spaceArticleListData.length>0){
                    //去重操作
                    let obj={};
                    this.articleList=this.articleList.concat(res.data.spaceArticleListData).reduce((item,next)=>{
                        obj[next.articleId]?"":obj[next.articleId]=true&&item.push(next);
                        return item;
                    },[]);
                    this.isLoading=false;
                    this.isHaveData=true;
                }
                else{
                    this.isLoading=false;
                    this.isHaveData=false;
                }
            }).catch(err=>{
                this.$message.error('获取数据失败，请稍后再试');
                this.isLoading=false;
                this.isHaveData=true;
                this.articleIndex--;
            })
        },
        moreFansData(){
            this.isFansLoading=true;
            this.fansIndex++;
            request({
                url:"/user/fansList/"+this.$route.query.userId+"/"+this.fansIndex
            }).then(res=>{
                if(res.data.fansList.length>0){
                    let obj={};
                    this.fansList=this.fansList.concat(res.data.fansList).reduce((item,next)=>{
                        obj[next.userId]?"":obj[next.userId]=true&&item.push(next);
                        return item;
                    },[]);
                    this.isFansLoading=false;
                    this.isHaveFansData=true;
                }else{
                    this.isFansLoading=false;
                    this.isHaveFansData=false;
                }
            }).catch(err=>{
                this.$message.error('获取数据失败，请稍后再试');
                this.isFansLoading=false;
                this.isHaveFansData=true;
                this.fansIndex--;
            })
        }
    },
    created(){
        this.getFirstData();
    },
    watch:{
        //如果路由发生变化泽重新加载数据
        "$route":"getFirstData"
    }
}
</script>

<style>

</style>